<template>
    <div class="photoinfo-container">
        <h3>{{ photoinfo.imageTitle }}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.addTime|dateFormat}}</span>
            <span>点击：{{photoinfo.click}}次</span>
        </p>

        <hr/>
        <!-- 缩略图区域 -->
        <div class="thunhs">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>





        <!-- 图片内容区域 -->
        <div class="content" v-html="photoinfo.content">

        </div>

       <!-- 评论子组件（现成组件） -->
        <cmt-box :id="id" :commentType="this.type"></cmt-box>
    </div>
</template>

<script>
    import comment from '../subcomponents/comment.vue'
    export default {
        data() {
            return {
                id:this.$route.params.id,
                photoinfo:{ },//图片详情,
                type:'photoInfo',//评论类型（图片评论）
                list:[]//缩略图数组
            }
        },
        methods:{
            //获取图片详情
            getPhotoInfo() {
                this.$http.get("/api/image/getPhoto/"+this.id).then(res => {
                    if(res.body.success === true) {
                        this.photoinfo = res.body.photo;


                    }
                });
            },
            getThunbs() {
                //获取缩略图
                this.$http.get("/api/image/getLunboList/"+this.id).then(res => {
                    if(res.body.success === true) {
                        //循环每一项数据，补全图片的宽和高
                        res.body.lunboImgs.forEach(item => {
                            item.src = 'http://www.hq-lyd.com'+item.imgUrl;
                            item.msrc = 'http://www.hq-lyd.com'+item.imgUrl;
                            item.w = 600;
                            item.h = 400;
                        })

                        //把完整数据保存到list里
                        this.list = res.body.lunboImgs
                        console.info(this.list)
                    }
                });
            },
            handleClose () {
                console.log('close event')
            }

        },
        created() {
            this.getPhotoInfo();

            //获取缩略图数据
            this.getThunbs();
        },
        components:{
            'cmt-box':comment//注册评论子组件
        }
    }
</script>

<style lang="scss">
    .photoinfo-container{
        padding: 3px;
        h3{
            color:#26a2ff;
            font-size: 15px;
            text-align: center;
            margin:15px 0;
        }
        .subtitle{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
        .content{
            font-size: 13px;
            line-height: 30px;
        }

        .my-gallery{
            figure{
                display: inline-block;
                margin: 0px;
                img{
                    width: 100px;
                    height: 100px;
                    margin: 10px;
                }


            }

        }

    }


</style>